<template>
  <div class="playListTop">
    <div class="back" @click="$router.back()">
      <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui"></use>
        </svg>
    </div>
    <div class="topName">{{ text }}</div>
    <div class="kongbai">
      <span v-if="name.includes('评论')">{{name}}</span>
      <marquee scrollamount="2" behavior="scroll" direction="left" v-else>{{
        name
      }}</marquee>
    </div>
    <div class="search">{{ icon_name1 }}</div>
    <div class="list">
      <svg class="icon" aria-hidden="true">
          <use :xlink:href="icon_name2"></use>
        </svg></div>
  </div>
</template>

<script>
export default {
  name: "palyListTop",
  props: ["name", "text", "icon_name1", "icon_name2"],
  setup() {},
};
</script>

<style lang="less" scoped>
.playListTop {
  color:white;
  // padding: 10px 10px;
  width: 6.5rem;
  height: 70px;
  // line-height: 70px;
  margin: auto;
  // background-color: skyblue;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  & > div {
    width: 35px;
    height: 35px;
    line-height: 35px;
    // background: yellow;
  }
  .kongbai {
    width: 36%;
    height: 35px;
  }
}
</style>